<template>
  <div class="page-container">
    <div class="common-content">
      <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
      <div class="search-wrap">
        <el-form :inline='true' :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
          <!--                <el-form-item label="部门ID：">-->
          <!--                    <el-input v-model="searchFilters.deptId" placeholder="请输入部门ID"></el-input>-->
          <!--                </el-form-item>-->
          <!--                <el-form-item label="子平台ID：">-->
          <!--                    <el-input v-model="searchFilters.platformCode" placeholder="请输入子平台ID"></el-input>-->
          <!--                </el-form-item>-->
          <!--                <el-form-item label="平台类型：">-->
          <!--                    <el-select v-model="searchFilters.platformType" clearable placeholder="平台类型">-->
          <!--                        <el-option label="新增" value="add"></el-option>-->
          <!--                        <el-option label="可用" value="available"></el-option>-->
          <!--                        <el-option label="总积分" value="total"></el-option>-->
          <!--                        <el-option label="冻结" value="frozen"></el-option>-->
          <!--                        <el-option label="申请" value="apply"></el-option>-->
          <!--                        <el-option label="实际剩余" value="real_left"></el-option>-->
          <!--                    </el-select>-->
          <!--                </el-form-item>-->
          <!--                <el-form-item label="统计类型">-->
          <!--                    <el-select v-model="searchFilters.reportType" clearable placeholder="统计类型">-->
          <!--                        <el-option label="小微" :value="1"></el-option>-->
          <!--                        <el-option label="产业" :value="2"></el-option>-->
          <!--                    </el-select>-->
          <!--                </el-form-item>-->
          <!--                <el-form-item label="积分类型:：">-->
          <!--                    <el-select v-model="searchFilters.pointType" clearable placeholder="全部积分">-->
          <!--                        <el-option label="全部积分" :value="0"></el-option>-->
          <!--                        <el-option label="交易积分" :value="1"></el-option>-->
          <!--                        <el-option label="交互积分" :value="2"></el-option>-->
          <!--                        <el-option label="现金积分" :value="3"></el-option>-->
          <!--                        <el-option label="定向积分" :value="4"></el-option>-->
          <!--                    </el-select>-->
          <!--                </el-form-item>-->
          <!--                <el-form-item label="发放类型：">-->
          <!--                    <el-select v-model="searchFilters.diliveryType" clearable placeholder="发放类型">-->
          <!--                        <el-option label="积分卡" :value="1"></el-option>-->
          <!--                        <el-option label="其他" :value="2"></el-option>-->
          <!--                    </el-select>-->
          <!--                </el-form-item>-->
          <el-form-item label="用户账号: ">
            <el-input v-model="searchFilters.userAccount" placeholder="请输入用户账号"></el-input>
          </el-form-item>
          <el-form-item label="昵称: ">
            <el-input v-model="searchFilters.nickname" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="手机号: ">
            <el-input v-model="searchFilters.phoneNumber" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <!-- 搜索区域按钮-查询,重置 -->
          <div class="tool-wrap">
            <div class="left-area">
              <el-button-group>
                <el-button type="primary" size="small" @click="findPage()">查询</el-button>
                <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
                <el-button type="primary" size="small" @click="addForm()">设置分销代理</el-button>
              </el-button-group>
            </div>
          </div>
          <!-- 表格数据部分 -->
          <div class="table-wrap">
            <jic-table :height="350"
                       :operationWidth=300
                       :tableList="tableList"
                       :tableHeaderList="tableHeaderList"
                       :totalSize="totalSize"
                       :showDetailOperation=false
                       :showEditOperation=false
                       :showBatchDelete=false
                       :showSelection=false
                       :showIndex=false
                       :showDeleteOperation=true
                       :showSuperiorAndSubordinate=true
                       @handleSuperiorAndSubordinate="handleSuperiorAndSubordinate"
                       @findPage="findPage"
                       @handleDetail="handleDetail"
                       @handleDelete="handleDelete"
                       @handleEdit="handleEdit"
                       @handleSizeChange="handleSizeChange"
                       @handlePageChange="handlePageChange"
                       ref="jicTable"></jic-table>
          </div>
        </el-form>
      </div>
      <!--设置分销代理-->
      <el-dialog title="添加代理分销员" :visible.sync="dialogTableVisible" width="60%">
        <div class="search-wrap">
          <el-form :inline="true" :model="operateDataForm" ref="searchFilters" label-position="right" label-width="200px">
            <el-form-item label="手机号码">
              <el-input v-model="operateDataForm.phoneNumber" placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="operateDataForm.nickname" placeholder="请输入昵称"></el-input>
            </el-form-item>
            <!--            <el-button size="mini" @click="queryProduct">查询</el-button>-->
            <!--            <el-button size="mini" @click="addAgentDistributor">取消</el-button>-->
            <!--            <el-button size="mini" @click="addAgentDistributor">提交</el-button>-->
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer" style="text-align: center">
          <el-button type="primary" size="mini" @click="dialogTableVisible = false">取 消</el-button>
          <el-button size="mini" @click="addAgentDistributor">提 交</el-button>
        </div>
      </el-dialog>
      <!--查看下级明细-->
      <el-dialog title="添加代理分销员" :visible.sync="checkDialogTableVisible" width="60%">
        <!--        <div class="search-wrap">-->
        <!--          <el-form :inline="true" :model="operateDataForm" ref="searchFilters" label-position="right" label-width="200px">-->
        <!--            <el-form-item label="手机号码">-->
        <!--              <el-input v-model="operateDataForm.phoneNumber" placeholder="请输入手机号码"></el-input>-->
        <!--            </el-form-item>-->
        <!--            <el-form-item label="昵称">-->
        <!--              <el-input v-model="operateDataForm.nickname" placeholder="请输入昵称"></el-input>-->
        <!--            </el-form-item>-->
        <!--            <el-button size="mini" @click="queryProduct">查询</el-button>-->
        <!--            <el-button size="mini" @click="addAgentDistributor">取消</el-button>-->
        <!--            <el-button size="mini" @click="addAgentDistributor">提交</el-button>-->
        <!--          </el-form>-->
        <!--        </div>-->
        <div class="table-wrap">
          <el-table :data="checkSubordinate" height="500px">
            <el-table-column align="center" prop="serialNumber" label="序号" width="180"/>
            <el-table-column align="center" prop="userAccount" label="用户账号" width="180"></el-table-column>
            <el-table-column align="center" prop="nickname" label="昵称" width="180"></el-table-column>
            <el-table-column align="center" prop="phoneNumber" label="手机号码"></el-table-column>
            <el-table-column align="center" prop="totalSales" label="销售总业绩"></el-table-column>
            <el-table-column align="center" prop="commissionAmount" label="佣金总额"></el-table-column>
            <el-table-column align="center" prop="settledAmount" label="发放状态"></el-table-column>
            <el-table-column align="center" prop="registrationTime" label="注册时间"></el-table-column>
          </el-table>
          <!--分页栏-->
          <div class="toolbar" style="padding:10px;">
            <el-pagination layout="total, prev, pager, next, jumper,sizes" @current-change="handlePageChange" @size-change="handleSizeChange" :current-page="pageRequest.pageNum" :page-size="pageRequest.pageSize" :total="totalSize" style="float:right;" :page-sizes="[10, 20, 30, 40]"></el-pagination>
          </div>
        </div>
        <div slot="footer" class="dialog-footer" style="text-align: center">
          <el-button type="primary" size="mini" @click="dialogTableVisible = false">取 消</el-button>
          <el-button size="mini" @click="addAgentDistributor">提 交</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  //一.导包区
  import jicTable from '@/components/jicComponentGallery/jicTable';

  //二.数据输出区
  export default {

    //===== 注册组件 =====
    components: {
      jicTable,
    },

    //===== 数据初始化区=====
    data() {
      return {

        //===== 公共数据初始化 =====
        pageIndex: 0, //当前页数：首页；
        pageSize: 10, //每页记录数：10条记录；
        totalSize: 0, //总记录数：返回数据总条数
        pageRequest: {
          pageNum: 1,
          pageSize: 10
        }, // 请求数据的参数
        tableList: [], // 表格列表数据

        /*{
          serialNumber:"111",
          userAccount:"gym123",
          nickname:"qwer",
          phoneNumber:"15505543551",
          totalSales:"1210",
          commissionAmount:"abcd",
          settledAmount:"1000",
          registrationTime:new Date().getTime(),
        }*/
        searchSize: 'mini',

        dialogTableVisible:false,
        checkDialogTableVisible:false,
        operateDataForm: {
          phoneNumber: null,
          nickname: null,
        },
        checkSubordinate: [{
          serialNumber:"123",
          userAccount:"123",
          nickname:"123",
          phoneNumber:"123",
          totalSales:"123",
          commissionAmount:"123",
          settledAmount:"123",
          registrationTime:"123",
        }],

        //=====表格表头数据=====
        tableHeaderList: [
          {
            prop: "serialNumber",
            label: "序号",
            minWidth: 100,
            formatter: null
          },
          {
            prop: "userAccount",
            label: "用户账号",
            minWidth: 100,
            formatter: null
          },
          {
            prop: "nickname",
            label: "昵称",
            minWidth: 100,
            formatter: null
          },
          {
            prop: "phoneNumber",
            label: "手机号码",
            minWidth: 100,
            formatter: null
          },
          {
            prop: "totalSales",
            label: "销售总业绩",
            minWidth: 100,
            formatter: null
          },
          {
            prop: "commissionAmount",
            label: "佣金金额",
            minWidth: 100,
            formatter: null
          },
          {
            prop: "settledAmount",
            label: "已结算金额",
            minWidth: 100,
            formatter: null
          },
          {
            prop: "registrationTime",
            label: "注册时间",
            minWidth: 100,
            formatter: null
          },
        ],

        //=====搜索表单对应的数据对象初始化=====
        searchFilters: {
          id: null,
          deptId: null,
          timeType: null,
          timeValue: null,
          platformCode: null,
          platformType: null,
          createTime: null,
          updateTime: null,
          creator: null,
          updater: null,
          deleteFlag: null,
          reportType: null,
          pointType: null,
          diliveryType: null,

          serialNumber:null,
          userAccount:null,
          nickname:null,
          phoNneumber:null,
          totalSales:null,
          commissionAmount:null,
          settledAmount:null,
          registrationTime:null,
        },
        //dialogVisible: false, //// 是否显示弹窗内容;
        //editDialogVisible1: false,//// 是否可编辑弹窗内容;
        //editLoading: false,////是否显示加载时动画效果;
      }
    },

    //===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
    mounted() {
      this.findPage();
    },

    //=====Vue.js 方法区=====
    methods: {
      //查询上下级按钮弹窗
      handleSuperiorAndSubordinate(){
        this.checkDialogTableVisible=true;

      },

      //保存 代理分销员
      addAgentDistributor(param) {
        let this_ = this;
        this_.$message({
          message: "操作成功",
          type: "success"
        });
        this_.dialogTableVisible = false;
        // if (!flag) {
        //   this.$confirm("确认提交吗？", "提示", {}).then(() => {
        //     let params = Object.assign({}, this.operateDataForm);
        //     params.products = this_.tableData
        //     params.storeId = this_.operateDataForm.position.id
        //     this.utils.request.saveTopProduct(params, function (res) {
        //       if (res.code == "0000") {
        //         this_.$message({
        //           message: "操作成功",
        //           type: "success"
        //         });
        //         this_.$router.push({
        //           path: "/Pages/Product/MEffectProductList"
        //         });
        //       } else {
        //         this_.$message({
        //           message: "操作失败," + res.msg,
        //           type: "error"
        //         });
        //       }
        //     });
        //   });
        // }
      },


      //1.查询按钮：查询列表数据
      findPage(pageNum) {
        // 传过滤器的参数
        let this_ = this;
        if (this_.searchFilters === undefined || this_.searchFilters === null) {
          this_.searchFilters = {};
        }

        this_.searchFilters.pageNum = pageNum === null || pageNum === undefined ? this.pageRequest.pageNum : pageNum;
        this_.searchFilters.pageSize = this.pageRequest.pageSize;
        this.utils.request.findProxyManager(this_.searchFilters, function (res) {
          if (res.code === "0000") {
              this_.tableList = res.data.list;
              this_.totalSize = Number(res.data.total);
          } else {
              this_.tableList = [];
              this_.totalSize = 0;
          }
        });
      },

      // 2.重置按钮：无条件查询搜索框条件
      resetForm(formName) {
        this.searchFilters = {};
        this.findPage(null);
      },

      // 3.详情按钮对应的方法
      handleDetail(params) {
        this.$router.push({
          path: "/BudgReportPointNormalDetail/",
          query: {
            id: params.row.id,
            disabled: true
          }
        });
      },

      // 4.编辑按钮对应的方法
      handleEdit(params) {
        this.$router.push({
          path: "/BudgReportPointNormalDetail/",
          query: {
            id: params.row.id,
            disabled: false
          }
        });
      },

      // 5.跳转到新增记录页面；
      addForm(params) {
        this.dialogTableVisible = true;
        // params = {
        //     row: {
        //         id: null
        //     }
        // };
        // this.$router.push({
        //     path: "/BudgReportPointNormalDetail/",
        //     query: {
        //         id: params.row.id,
        //         disabled: false
        //     }
        // });
      },
      // 6.每页记录数发生变化
      handleSizeChange(params) {
        this.pageRequest.pageSize = params.size;
      },

      // 7.请求页数发生变化
      handlePageChange(params) {
        this.pageRequest.pageNum = params.number;
        this.findPage();
      },
      // 8.页面弹窗处理方法
      add() {
        this.dialogVisible = true;
      },

      // 9.关闭弹窗
      handleClose() {
        this.dialogVisible = false;
      },

      // 10.删除按钮：删除选中的记录
      handleDelete(data) {
        this.utils.request.deleteBudgReportPointNormal({
          id: data.row.id
        }, res => {
          if (res.data) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.findPage();
          } else {
            this.$message({
              message: '删除失败',
              type: 'warning'
            });
          }
        });
      }
      //==========Vue.js自定义方法区==========

    },
  }
</script>

<style lang="scss" scoped>
  /* ele组件样式重置 */
  .common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
      .el-form-item__label {
        height: 32px;
        line-height: 32px;
      }

      .el-form-item__content {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }

      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }

      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 150px;
      }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
      width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;

      .left-area {
        float: left;
        width: 50%;
        text-align: left;

        button {
          margin-right: 15px;
          border-radius: 5px;
        }
      }

      .right-area {
        float: right;
        width: 50%;
        text-align: right;
      }
    }

    /* 表格部分样式 */
    .table-wrap {
      width: 100%;
      max-height: 600px;
      margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
      text-align: center !important;
    }
  }
</style>
